import React from 'react';
import { connect } from 'react-redux';
import GroupList from './GroupList' ; 
import { deleteGroups } from "../../../actions/usersActions";
import { Link } from 'react-router' ; 
import { Layout,Button } from 'antd';  
const { Footer, Header, Content } = Layout;

class GroupPage extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            loading:false,
            selectedRowKeys:[]
        }
    }

    handlerDeleteClick = () => {
        this.setState({loading:true});
        this.props.deleteGroups(this.state.selectedRowKeys).then(
            (res) => { console.log(res); this.setState({ loading: false }); }
        )
    }

    onSelectChange = (selectedRowKeys) => {
        this.setState({selectedRowKeys});
    }

    render(){
        return (
            <div >
                <Layout>
                <Layout>
                    <Header>
                         <Link to={`/admin/groups/add`} > 新增 </Link> 
                        <Button onClick={this.handlerDeleteClick}>  删除   </Button>
                    </Header>
                    <Content>
                        <GroupList onSelectChange={this.onSelectChange}/>
                    </Content>
                </Layout>
                <Footer>Footer</Footer>
                </Layout>
            </div>
        )
    }
}

GroupPage.propTypes = {
    deleteGroups: React.PropTypes.func.isRequired,
};

GroupPage.contextTypes = {
  router: React.PropTypes.object.isRequired
}

// const mapStateToProps = (state) => {
//   return { 
//   }
// }

export default connect(null,{deleteGroups})(GroupPage);